<template>
    <div id="importData">
        <el-dialog
            title="标签导入"
            center
            :visible.sync="visible"
            :close-on-click-modal="false"
            width="800px"
        >
            <div
                class="importPage"
                v-loading="loading"
                element-loading-text="正在导入中"
            >
                <div class="importPage_mid">
                    <div class="importPage_mid_icon">
                        <i class="el-icon-upload"></i>
                        <span>将资源文件拖拽到这里</span>
                    </div>
                    <div class="importPage_mid_btn">
                        <div class="import-file-upload">
                            <el-upload
                                class="upload-file"
                                :action="uploadUrl"
                                :headers="headers"
                                accept=".xls,.xlsx"
                                :before-upload="handleBefore"
                                :on-preview="handlePreview"
                                :on-progress="handleProgress"
                                :on-success="handleSuccess"
                                :on-error="handleError"
                                :show-file-list="false"
                                drag
                            >
                                <div class="upload-file-btn-c">
                                    <span>或者</span>
                                    <el-button
                                        class="upload-file-btn"
                                        icon="el-icon-upload2"
                                        size="small"
                                        >上传文件</el-button
                                    >
                                </div>
                            </el-upload>
                        </div>
                    </div>
                </div>
                <p class="importPage_intro">
                    提示：文件后缀名必须为.xls或.xlsx等表格类文件格式。
                </p>
                <p class="importPage_error">
                    {{uploadInfo}}
                </p>
                <div class="file_list_box" v-if="tableData.length>0">
                    <h3>导入失败列表</h3>
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        height="250"
                        border
                    >
                        <el-table-column
                            prop="labelName"
                            label="标签名称"
                            min-width="20%"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="labelType"
                            label="标签类型"
                            min-width="20%"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="uploadMessage"
                            label="失败原因"
                            min-width="20%"
                        >
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
                :class="loading ? 'cantUse' : ''"
            >
                <el-button @click="sureFn" :loading="loading" type="primary"
                    >确定</el-button
                >
                <!-- <el-button
                    type="primary"
                    @click="handleForm()"
                    :loading="loading"
                    >确认导入</el-button
                > -->
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'importData',
  data() {
    return {
      uploadUrl: this.$config.VUE_APP_BASE_API + '/knowledgeLabel/import',
      headers: {
        token: localStorage.getItem('token')
      },
      visible: false,
      loading: false,
      uploadInfo: '',
      tableData: [],
    }
  },
  props: {
    dataImportType: {
      type: String,
      default: () => {
        return '1'
      }
    },
    refreshData: {
      type: Function,
      default: () => {}
    }
  },
  mounted() {},
  methods: {
    init() {
      this.visible = true
      this.tableData = []
      this.uploadInfo = ''
    },
    handleBefore(file) {
        this.tableData = []
      this.loading = true
      const isExpectFile =
        file.type === 'application/msexcel' ||
        file.type === 'application/x-msexcel' ||
        file.type === 'application/vnd.ms-excel' ||
        file.type ===
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        file.type ===
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
        file.type === 'application/wps-office.xlt' ||
        file.type === 'application/wps-office.xltx' ||
        file.type === 'application/wps-office.xls' ||
        file.type === 'application/wps-office.xlsx' ||
        file.type === 'application/wps-office.et' ||
        file.type === 'application/wps-office.ett' ||
        file.type === 'application/xls' ||
        file.type === 'application/xlsx'
      const endsWith =
        file.name.endsWith('.xlt') ||
        file.name.endsWith('.xltx') ||
        file.name.endsWith('.xls') ||
        file.name.endsWith('.xlsx') ||
        file.name.endsWith('.xlsm') ||
        file.name.endsWith('.xlsb') ||
        file.name.endsWith('.et') ||
        file.name.endsWith('.ett')
      const isLt50M = file.size / 1024 / 1024 < 50
      if (!isExpectFile && !endsWith) {
        this.$message({
          message: '只能上传表格类文件',
          type: 'warning'
        })
        this.tableData = []
        this.loading = false
        return false
      }
      if (!isLt50M) {
        this.$message({
          message: '上传文件最大为50M',
          type: 'warning'
        })
        this.loading = false
        return false
      }
      return (isExpectFile || endsWith) && isLt50M
    },
    handlePreview(file) {
      // if (file.response) {
      //     this.$utils.download({ url: `/sys/accessory/download/${file.response.accessory.id}` })
      // } else {
      //     this.$utils.download({ url: `/sys/accessory/download/${file.url}` })
      // }
      // this.$message({
      //     showClose: true,
      //     message: '文件下载中...'
      // })
    },
    handleProgress(event, file, fileList) {},
    handleError(err, file, fileList) {},
    handleSuccess(response, file) {
      if (response && response.code === 200) {
        this.uploadInfo = response.data.uploadResult
        this.tableData = response.data.list || []
      } else {
        this.$message({
          message: `文件上传失败`,
          type: 'warning'
        })
      }
      this.loading = false
    },
    // 确认上传
    handleForm() {
      // if (!this.ImportPage.accessoryId) {
      //     this.$message.warning('请上传文件')
      //     return false
      // }
      // this.loading = true
      // this.$http({
      //     url: '/resource/manage/import',
      //     method: 'post',
      //     // headers: {
      //     //     'Content-Type': 'multipart/form-data',
      //     //     'token': sessionStorage.getItem('token')
      //     // },
      //     data: this.ImportPage,
      // }).then(({ data }) => {
      //     if (data.errorAccessoryId) {
      //         this.$utils.download({ url: `/sys/accessory/download/${data.errorAccessoryId}` })
      //     }
      //     if (data && data.success) {
      //         this.$message({
      //             message: data.msg,
      //             type: 'success'
      //         })
      //     }
      //     this.loading = false
      //     this.visible = false
      //     this.refreshData()
      // })
    },
    sureFn(){
      this.$emit('callParentMethod');
      this.visible = false

    }
  }
}
</script>

<style scoped lang="scss">
#importData {
    .bindGrid {
        position: absolute;
        color: red;
        cursor: pointer;
        right: 20px;
        top: 90px;
    }
    .importPage_mid {
        // padding: 20px 10px;
        // background: #f2f2f2;
        margin-top: 10px;
        position: relative;
    }

    .importPage_mid_icon {
        position: absolute;
        z-index: 1;
        top: 20px;
        left: 20px;
        i {
            color: #47b5fc;
            font-size: 36px;
            margin-right: 8px;
        }

        span {
            font-size: 16px;
            color: #333;
            vertical-align: super;
        }
    }

    .importPage_mid_btn {
        display: flex;
        justify-content: space-between;
        // margin-top: 40px;
    }

    .importPage_intro {
        color: #999;
    }
    .importPage_error {
        color: #f00;
    }
    .cantUse {
        pointer-events: none;
    }
    ::v-deep .el-upload-dragger {
        width: 100% !important;
        background: #f2f2f2;
    }
    ::v-deep .el-upload {
        width: 100% !important;
    }
    ::v-deep .import-file-upload {
        width: 100% !important;
    }
    .upload-file {
        position: relative;
    }
    .upload-file-btn-c {
        position: absolute;
        top: 80px;
        left: 20px;
        span {
            font-size: 13px;
            color: #888;
        }
        .upload-file-btn {
            margin-left: 10px;
        }
    }
    .t_row {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .t_row_half {
        width: 48%;
    }
}
</style>
